<script  setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted,computed } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

 const props =  defineProps(['htmlStr'])
 const emits =  defineEmits(['update:htmlStr'])


 const editorRef = shallowRef()

    // 模拟 ajax 异步获取内容
    onMounted(() => {
        // setTimeout(() => {
        //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
        // }, 1500)
    })
    const mode = ref('default');
  
    const toolbarConfig = {}
    const editorConfig = { 
      placeholder: '请输入内容...',
      MENU_CONF: {
         uploadImage:{
           server:'/api/file/upload',
           fieldName:'file'
        }

      },
    }
    const modelVal = computed({
      get:()=>props.htmlStr,
      set:(value)=>  emits('update:htmlStr',value)
    });
    // const updateModelValue = (content)=>{
    //     console.log(content);
    // }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value;
        if (editor == null) return
        editor.destroy()
     

    })

    const handleCreated = (editor) => {

      editorRef.value = editor // 记录 editor 实例，重要！

    }
    const handleChange = ( editor)=> {
      // console.log(emits);
      // emits('update:htmlStr',editor.getHtml());
      // console.log('change1');
    }
</script>

<template>

   <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="modelVal"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChange"
      />
    </div>
</template>